/<template>
  <div id="userInfo">
    <div class="content">
      <el-avatar size="medium" :src="circleUrl"></el-avatar>
    </div>
    <div class="content">
      <h3 id="user"><i class="el-icon-user-solid"></i> {{ username || '未登录或未获取' }}</h3>
    </div>
    <div class="content">
      <el-button type="danger" round @click="quit()">退出</el-button>
    </div>

  </div>
</template>

<script>
export default {
    data(){
        return{
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            username:atob(localStorage.username)
        }
    },
    methods:{
      quit(){
        localStorage.removeItem('token');
        localStorage.removeItem('username');
        this.$notify.info({
          title:'登出成功',
          message:'转入登录页面'
        })
        this.$router.push('/login')        
      }
    }
}
</script>

<style scoped>





.el-avatar,.el-button,h3,.content{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#userInfo{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: normal;
}

#user {
  margin: 0;
  font: 1.5rem sans-serif;
}

.content {
  padding: 0 10px;
  border-radius: 4px;
  min-height: 36px;
  height: fit-content;
  /* padding: 10px 0; */
}

.el-button{
  padding: 12px 23px !important;
}


</style>